<script>
import axios, {request} from "axios";
import global from "../../views/global/global";
//弹出对话框引用插件
import {ref} from 'vue'
/*const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
]);*/

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')

export default {
  //弹出对话框引用
  setup() {
    const dialogVisible = ref(false);
    const UPdialogVisible = ref(false);
    const details = ref(false);
    return {
      dialogVisible,
      UPdialogVisible,
      details
    };
  },
  data(){
    return {
    pageDto:{
      pageSize:3,
      pageNum:1,
    },
      value1,
      value2,
      value3,
      announcementList:[],  //显示
      upannounements:[],
      announcements:{
        createdAt:"",
        startTime:"",
        endTime:"",
        createdBy:"",
      },
      total:0,
      pages:0,
      user:global.user,
    }
  },
  methods:{
    getData:function(){
      axios.get("/oa/announcements/queryPage",{params:this.pageDto}).then((res)=>{
        this.pageDto.pageNum=res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total=res.data.data.total;
        this.pages=res.data.data.pages;
        this.announcementList=res.data.data.list;
        // alert(this.announcementList.announcementId)
      })
    },dateFormat(time) {  //日期转换
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
      * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
      * */
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
// 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
//       return year + "-" + month + "-" + day;
    },
    handleDelete(announcementId){
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      axios.delete(`/oa/announcements/delition/${announcementId}`)
          .then((data)=>{
            console.log(data)
            if(data.data.result){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getData();
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          })
          .catch(function (error){
            console.log(error)
          })
    }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      );
    },
    // 点击添加
    Add(){
      this.announcements.createdAt = this.value3
      this.announcements.startTime = this.value1
      this.announcements.endTime = this.value2
      // alert("最新获取的时间"+  this.user.id)
      this.announcements.createdBy = this.user.id
      if(this.announcements.title === null || this.announcements.title === undefined || this.announcements.title === ""){
        this.$message({
          type: 'warning',
          message: '标题不能为空!'
        });
        return;
      }
      if(this.announcements.startTime === null || this.announcements.startTime === ""){
        this.$message({
          type: 'warning',
          message: '开始时间不能为空!'
        });
        return;
      }
      if(this.announcements.endTime === null || this.announcements.endTime === ""){
        this.$message({
          type: 'warning',
          message: '结束时间不能为空!'
        });
        return;
      }
      if(this.announcements.content === null || this.announcements.content === undefined || this.announcements.content === ""){
        this.$message({
          type: 'warning',
          message: '内容不能为空!'
        });
        return;
      }
      if(this.announcements.urgency === null || this.announcements.urgency === undefined || this.announcements.urgency === ""){
        this.$message({
          type: 'warning',
          message: '请选择情况紧急程度!'
        });
        return;
      }
      axios.post("/oa/announcements/addition",this.announcements).then( (data)=>{
            if(data.data){
              this.$message({
                type: 'success',
                message: '新增成功!'
              });
              this.dialogVisible = false
              this.$router.push('/CallboardsView')
              this.getData()
            }else {
              this.$message({
                type: 'error',
                message: '新增失败!'
              });
              // this.dialogVisible = false
            }
          })
          .catch((error)=>{
            console.log(error)
          });

    },
    onSubmit(){  //修改
      this.upannounements.createdAt = this.value3
      this.upannounements.startTime = this.value1
      this.upannounements.endTime = this.value2
      axios.put("/oa/announcements/updetaition",this.upannounements)
          .then( (data)=>{
            if(data.data){
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.dialogVisible = false
              this.getData()
            }else {
              this.$message({
                type: 'error',
                message: '修改失败!'
              });
              this.dialogVisible = false
            }
          })
          .catch((error)=>{
            console.log(error)
          });

    },finUpdate(id){ //修改查询
      console.log(id)

      axios.get(`/oa/announcements/finUpdate/${id}`)
          .then( (data)=>{
            console.log(data)
            this.upannounements =data.data.data;
            console.log(this.upannounements.title)
          })
          .catch((error)=>{
            console.log(error)
          });
    },addButton(){
      this.dialogVisible = true
      this.announcements = {}
      this.value1=null
      this.value2=null
    }
  },
  created() {
    this.getData();
  }
}
</script>

<template>

  <div>
    <div class="titleBox">
      <router-link :to="'/HomePageView'">
        <el-button class="titleLeft" plain style="
      border: none;
      font-weight: bold;
      text-align: left;
      float: left;
      margin: 5px 0 0 0 ">
          <&nbsp;&nbsp;&nbsp;&nbsp;桌面
        </el-button>
      </router-link>
    通告管理
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="" @click="addButton()">
      <el-button size="small" >
        新增
      </el-button>
    </router-link>
    </div>



    <div>
      <!-- 首页表格信息显示 -->
      <el-table :data="this.announcementList" style="width: 100%">

        <el-table-column  label="名称" >
          <template  #default="scope">
            <el-link to="" @click="finUpdate(scope.row.announcementId),details=true">
              <div class="text-overflow" style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.title}}</span>
              </div>
            </el-link>

          </template>
        </el-table-column>

        <el-table-column label="发布人">
          <template #default="scope">
            <div  style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.urgency }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="发布时间">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{dateFormat( scope.row.startTime)}}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">

            <router-link to="" @click="finUpdate(scope.row.announcementId),UPdialogVisible=true">
              <el-button size="small">
                修改
              </el-button>
            </router-link>&nbsp;&nbsp;

            <el-button size="small" type="danger" @click="handleDelete( scope.row.announcementId)">
              &nbsp;删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- 分页-->
      <el-pagination
          v-model:current-page="this.pageDto.pageNum"
          :page-size="this.pageDto.pageSize"
          :pager-count="this.pages"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="getData"
      />
    </div>
  </div>

<!--  新增-->
  <el-dialog
      v-model="dialogVisible"
      title="添加通知公告"
      width="600"
      :before-close="handleClose"
  >
    <el-form
        style="max-width: 600px;margin: 0 "
        :model="announcements"
        class="demo-ruleForm"
    >
      <el-form-item label="标题：" prop="userCord" >
        <el-input
            v-model="announcements.title"
            type="text"
            autocomplete="off"
            aria-required="true"
            placeholder="请输入标题"
        />
      </el-form-item>

      <el-form-item label="显示时间段：" prop="userCord">
        <div class="block">
          <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="选择时间段"
              :default-time="defaultTime"
          />to
          <el-date-picker
              v-model="value2"
              type="datetime"
              placeholder="选择时间段"
              :default-time="defaultTime"
          />
        </div>
      </el-form-item>



      <el-form-item label="发布人:" prop="userCord">
        <span>{{user.title}}</span>
      </el-form-item>

      <el-form-item label="内容" prop="userCord">
        <el-input
            v-model="announcements.content"
            type="textarea"
            autocomplete="off"
            aria-required="true"
            placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="" prop="userCord">
        <el-radio-group v-model="announcements.urgency">
          <el-radio label="紧急" :value="紧急">紧急</el-radio>
          <el-radio label="一般" :value="一般">一般</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="Add()">
          添加
        </el-button>
      </div>
    </template>

  </el-dialog>

<!--修改-->
  <el-dialog
      v-model="UPdialogVisible"
      title="修改通知公告"
      width="600"
      :before-close="handleClose"
  >
    <el-form
        style="max-width: 600px;margin: 0 "
        :model="upannounements"
        class="demo-ruleForm"
    >
      <el-form-item label="标题：" prop="userCord" >
        <el-input v-model="upannounements.title" />
      </el-form-item>

      <el-form-item label="显示时间段：" prop="userCord">
        <div class="block">
          <el-date-picker
              v-model="upannounements.endTime"
              type="datetime"
              placeholder="Select date and time"
              :default-time="defaultTime"
          />to
          <el-date-picker
              v-model="upannounements.startTime"
              type="datetime"
              placeholder="Select date and time"
              :default-time="defaultTime"
          />
        </div>
      </el-form-item>

      <el-form-item label="上次发布时间：" prop="userCord">
        <span> {{upannounements.createdAt}} </span>
      </el-form-item>

      <el-form-item label="发布人:" prop="userCord">
        <span>{{user.title}}</span>
      </el-form-item>

      <el-form-item label="内容：" prop="userCord">
        <el-input
            v-model="upannounements.content"
            type="textarea"
        />
      </el-form-item>

      <el-form-item label="" prop="userCord">
        <el-radio-group v-model="upannounements.urgency">
          <el-radio label="紧急" :value="紧急">紧急</el-radio>
          <el-radio label="一般" :value="一般">一般</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="UPdialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit(),UPdialogVisible=false">
          修改
        </el-button>
      </div>
    </template>

  </el-dialog>

  <el-dialog
      v-model="details"
      :title="upannounements.title"
      width="600"
      :before-close="handleClose"
  >
    <el-form-item label="发布时间：" prop="userCord" text-align="right">
      <span> {{upannounements.createdAt}} </span>
    </el-form-item>
    <hr>
    <el-form-item prop="userCord">
      <span> {{upannounements.content}} </span>
    </el-form-item>

  </el-dialog>

</template>

<style scoped lang="less">
   .block {
     border-right: solid 1px var(--el-border-color);
     flex: 1;
   }
  .block:last-child {
    border-right: none;
  }
   .block .demonstration {
     display: block;
     color: var(--el-text-color-secondary);
   }

</style>
